<!--父级页面:控制除登录页面以外的所有页面共有的头部与左侧菜单栏-->
<!--管理员的页面-->
<template>
  <!--  display: flex;表示给父级元素使用弹性布局
  效果:所有子元素横置,且父元素会根据子元素横置后的实际高度自动填充高度-->
  <div style="display: flex">
    <!-- :style="{}",这里用{}括起来是先计算完再赋值给width属性
        isCollapse为true时,折叠左侧菜单栏宽度为64px,为false时,不折叠左侧菜单栏宽度为208px-->
    <div :style="{width:(isCollapse?'64px':'208px')}">


      <!--左侧菜单栏    unique-opened表示只展开一个菜单项,
                      :collapse="isCollapse"属性绑定,将isCollapse绑定到collapse属性上-->
      <!--给菜单栏添加router属性,表示下面的子菜单使用路由跳转 如:index="/user">用户列表-->
      <!--设置 :collapse-transition="false",属性用于控制折叠过渡效果。 -->
      <!-- @select="selectMenu" 选择菜单栏,触发下面selectMenu方法
      帮助我们获取当前选中的菜单项的index值-->
      <el-menu
          background-color=" rgba(135, 206, 250, 0.8)"
          text-color="#rgba(23, 23, 23, 0.8)"
          active-text-color="yellow"
          style="width: 100%;height: 100vh;"
          :collapse="isCollapse"
          :collapse-transition="false"
          router unique-opened
          @select="selectMenu">
        <!-- 左侧菜单栏的顶部条  <el-avatar将图片裁成圆形,跟<img>标签一样,直接写路径src-->
        <el-row style="padding-top: 10px;" >
          <el-col :span="2"></el-col>
          <el-col :span="7" style="padding-left: 7px">
            <el-avatar src="/imgs/admin/logo.png" style="width: 35px;height: 35px;"></el-avatar>
          </el-col>
          <el-col :span="isCollapse? 0:13">
            <span style="color: black;font-weight: bold;position: relative;top: 8px;left: 2px">居家养老</span>
          </el-col>
        </el-row>

        <!-- 左侧菜单栏设计的样式  如:一个图标+用户管理-->
        <el-sub-menu index="1" clourd-color="#fff">
          <template #title>
            <el-icon style="font-size: 21px"><User/></el-icon><span>用户管理</span>
          </template>
          <!--折叠展开的子菜单项 index使用router包的index.js的路由进行跳转-->
          <el-menu-item index="/user">用户列表</el-menu-item>
          <el-menu-item index="/server">家政人员列表</el-menu-item>
          <el-menu-item index="/doctor">医生人员列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon style="font-size: 21px"><Van/></el-icon><span>服务项管理</span>
          </template>
          <el-menu-item index="/service">家政项目列表</el-menu-item>
          <el-menu-item index="/doctors">医生项目列表</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="3">
          <template #title>
            <el-icon style="font-size: 21px"><Place/></el-icon><span>家政分配管理</span>
          </template>
          <el-menu-item index="/application">申请列表</el-menu-item>
          <el-menu-item index="/audit">分配审核</el-menu-item>
          <el-menu-item index="/distribute">人员分配</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <el-icon style="font-size: 21px"><Place/></el-icon><span>医疗分配管理</span>
          </template>
          <el-menu-item index="/DotApplication">申请列表</el-menu-item>
          <el-menu-item index="/DotAudit">分配审核</el-menu-item>
          <el-menu-item index="/DotDistribute">人员分配</el-menu-item>
        </el-sub-menu>

      </el-menu>
    </div>


    <!--计算右侧剩下的宽度  calc(100% - 64px)  -  前后必须有空格 -->
    <div :style="{width:(isCollapse?'calc(100% - 64px)':'calc(100% - 208px)')}"
         >
      <!--右侧顶部条与主体内容-->
      <el-header style="height: 10vh;background-color: #fff;padding-top: 22px">
        <!-- 折叠图标与用户名选项都在一行,所以用el-row和el-col布局,
        分了2列,第一列是折叠图标占18,第二列是用户名选项占6   -->
        <el-row :gutter="10">
          <el-col :span="18">
            <el-icon style="font-size: 20px" @click="changeCollapse"><Expand/></el-icon>
          </el-col>
          <el-col :span="6" style="position: relative;">
            <!--在用户名选项的6 中加入下拉箭头<el-dropdown ,trigger="click",点击才会显示下拉内容-->
            <el-dropdown trigger="click" style="position: absolute;right: 20px">
                <span style="font-size: 19px;font-weight: bold">
                 {{lisi}}
                 <el-icon ><arrow-down /></el-icon>
               </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
        </el-row>
        <!--面包屑导航         -->
        <el-breadcrumb separator="/" style="position: relative;top: 20px;">
          <el-breadcrumb-item @click="router.push('/look')">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-for="item in breadcrumb">{{item}}</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>
      <!--右侧主体内容 要将<router-view/>放在<el-main>中,因为只有这里是可变内容,其他部分都是公用的-->
      <el-main style="height: 90vh;padding: 0;overflow-y:auto;">
        <router-view/>
      </el-main>
    </div>
  </div>

</template>

<script setup>
import {ref} from "vue";
import router from "@/router";

let map = {
  '/user': ['用户管理', '用户列表'],
  '/server': ['用户管理', '家政人员列表'],
  '/doctor': ['用户管理', '医生人员列表'],
  '/service': ['服务项管理', '家政项目列表'],
  '/doctors': ['服务项管理', '医生项目列表'],
  '/application': ['家政分配管理', '申请列表'],
  '/audit': ['家政分配管理', '分配审核'],
  '/distribute': ['家政分配管理', '人员分配'],
  '/DotApplication': ['医疗分配管理', '申请列表'],
  '/DotAudit': ['医疗分配管理', '分配审核'],
  '/DotDistribute': ['医疗分配管理', '人员分配'],
};
const breadcrumb = ref(JSON.parse(localStorage.getItem('breadCrumb'))
    ||['用户管理', '用户列表']);
const selectMenu = (index) => {
  breadcrumb.value = map[index];//等价java的map.get('index')=>['用户管理','用户列表']
  localStorage.setItem('breadCrumb', JSON.stringify(breadcrumb.value));
}
</script>